<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td{
            width: 30px;
            height: 20px;
            text-align: center;
            background-color: antiquewhite;
            border: 1px solid rgb(112, 112, 112);
        }
    </style>
</head>
<table>

</table>

<body>
    <!-- 1.在页面上根据数据，
        动态创建表格
var arr = [ { name: 'Jack', age: 18, gender: '男' },
{ name: 'Rose', age: 20, gender: '女' },
{ name: 'Top', age: 22, gender: '男' } ] 
创建一个表格，展示上面数组中的信息
​2.根据数据创建表格实现隔行变色功能 -->
    <script>
        var arr = [{
                name: 'Jack',
                age: 18,
                gender: '男'
            },
            {
                name: 'Rose',
                age: 20,
                gender: '女'
            },
            {
                name: 'Top',
                age: 22,
                gender: '男'
            },
            {
                name: 'Sun',
                age: 26,
                gender: '男'
            },
            {
                name: 'Lily',
                age: 22,
                gender: '女'
            }
        ]
        str = ""
        arr.forEach(function (item) {
            str += ` <tr><td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td></tr>`
        })
        var table = document.querySelector("table");

        table.innerHTML = str;
    </script>
</body>

</html>